<template>
	<el-table size="small" :data="data" row-key="id" class="rules_table" default-expand-all :tree-props="{ children: 'attribute', hasChildren: 'hasChildren' }">
		<el-table-column label="编目规则" width="200">
			<template slot-scope="{ row }">
				<el-input size="small" v-model="row.name"></el-input>
			</template>
		</el-table-column>
		<el-table-column width="80">
			<template slot-scope="{ row }">
				<el-checkbox size="small" v-model="row.isNull">必填</el-checkbox>
			</template>
		</el-table-column>
		<el-table-column width="100">
			<template slot-scope="{ row }">
				<el-select size="small" v-model="row.type" @change="handleTypeChange(row)">
					<el-option v-for="(item, index) in dictEnums['RULES_TYPE']" :label="item.msg" :value="item.value"></el-option>
				</el-select>
			</template>
		</el-table-column>
		<el-table-column>
			<template slot-scope="{ row }">
				<rules-option :data="row.typeData" v-if="row.type === '5' || row.type === '6'"></rules-option>
			</template>
		</el-table-column>
		<el-table-column width="150" align="right">
			<template slot="header">
				<el-button type="text" @click="handleAddRules()">添加规则</el-button>
			</template>
			<template slot-scope="{ row }">
				<el-button type="text" @click="handleAddRules(row)" v-if="row.level === 1">添加二级规则</el-button>
				<el-button type="text" @click="handleDelRules(row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import { mapGetters } from 'vuex';
import rulesOption from './options';
export default {
	components: { rulesOption },
	props: {
		data: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {};
	},
	computed: { ...mapGetters(['dictEnums']) },
	watch: {
		data(arr){
			console.log(arr);
		}
	},
	methods: {
		//添加编目规则
		handleAddRules(obj) {
			if (!obj) {
				if (this.data.some((item) => !item.name)) {
					this.$message.warning('规则名称未填写');
					return false;
				}
				this.data.push({
					id: this.$genUUID(),
					name: '',
					type: '1',
					level: 1,
					isNull: true
				});
			} else {
				if (!obj.name) {
					this.$message.warning('上级规则名称未填写');
					return false;
				} else if (!obj.attribute) {
					this.$set(obj, 'attribute', []);
				} else if (obj.attribute.some((item) => !item.name)) {
					this.$message.warning('二级规则未填写');
					return false;
				}
				obj['attribute'].push({
					id: this.$genUUID(),
					name: '',
					type: '1',
					level: 2,
					isNull: true
				});
			}
		},

		//删除编目规则
		handleDelRules(data) {
			if (data.attribute && data.attribute.length > 0) {
				this.$message.warning('存在二级编目无法删除');
			} else {
				this.$removeTreeNode(this.data, data.id, 'attribute');
			}
		},

		//切换规则类型
		handleTypeChange(data) {
			if (data.type === '5' || data.type === '6') {
				this.$set(data, 'typeData', []);
			} else {
				this.$delete(data, 'typeData');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.rules_table::v-deep {
	.el-table__expand-icon {
		display: none;
	}
	.el-table__cell .cell {
		line-height: 1;
	}
	/* .el-table_1_column_1 .cell {
		display: flex;
		font-size: 14px;
		padding-left: 0;
		align-items: center;
	} */
	.opt_box {
		display: inline-flex;
		.el-button {
			margin-left: 5px;
		}
		.el-input.error .el-input__inner {
			border-color: #f00;
		}
	}
	.el-button {
		padding: 0;
	}
}
</style>
